<template>
  <footer class="footer-nav">
    <nav>
      <router-link
        v-for="(item, index) in tabbar"
        :key="index"
        :to="item.path"
        active-class="active"
      >
        <template v-if="item.path == '/car'">
          <span class="num">{{count}}</span>
        </template>
        <icon :name="item.icon" class="default-icon" />
        <icon :name="item.activeIcon" class="active-icon" />
        <output>
          {{ item.text }}
        </output>
      </router-link>
    </nav>
  </footer>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'FooterNav',
  computed: {
    ...mapGetters('car', ['count'])
  },
  data () {
    return {
      tabbar: [
        {
          path: '/home',
          text: '首页',
          icon: 'home',
          activeIcon: 'home-active'
        },
        {
          path: '/classify',
          text: '分类',
          icon: 'class',
          activeIcon: 'class-active'
        },
        {
          path: '/car',
          text: '购物车',
          icon: 'car',
          activeIcon: 'car-active'
        },
        {
          path: '/mine',
          text: '我的',
          icon: 'mine',
          activeIcon: 'mine-active'
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.footer-nav {
  @include wh(100%, auto);
  background: #fff;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 200;
  nav {
    @include wh(100%, auto);
    @include flex(row, center, center);
    a {
      @include flex(column, center, center);
      width: 0;
      flex: 1;
      padding: 14px 0;
      position: relative;
      .active-icon {
        display: none;
      }
      output {
        margin-top: 4px;
        color:#666666;
      }
      .num {
        background: $base-color;
        color:#fff;
        position: absolute;
        top: 0;
        right: 0;
      }
      &.active {
        .default-icon {
          display: none;
        }
        .active-icon {
          display: block;
        }
        output {
          color: $base-color;
        }
      }
    }
  }
}
</style>
